<!-- 用户管理 -->
<template>
  <div id="liveSystemCache">
    <div class="border_bottom">
      <span class="title_span">系统管理 / 缓存管理 </span>
    </div>
    <div >
      <el-form :inline="true" label-position="left" label-width="100px">
        <div class="mT10 text-align-right">
          <el-row>
            <el-form-item label="Key">
              <el-input v-model="form.key" clearable placeholder="请输入Key" style="width:230px"></el-input>
            </el-form-item>
            <div style="float:right">
              <el-button type="primary" @click="btnPageList(true)" icon="my-search" class="mL57">查询</el-button>
              <el-button type="primary" @click="btnReset" icon="my-spinner11">重置</el-button>
              <el-button type="danger" @click="clear" icon="my-spinner11">一键清空</el-button>
            </div>
          </el-row>
        </div>
      </el-form>
      <!-- 列表 -->
      <el-row>
        <el-table v-loading="loadingTableData" :data="tableData" row-key="id" :stripe="false" style="width: 100%">
          <el-table-column label="序号" type="index" show-overflow-tooltip width="50">
          </el-table-column>
          <el-table-column prop="key" label="key"></el-table-column>
          <el-table-column prop="value" label="value">
            <template slot-scope="scope" v-if="scope.row.value != ''">
              <el-popover trigger="hover"  placement="top-start">
                <p>{{ scope.row.value }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.value }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteCache(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <div class="mT20 mB20 float-right" style="width:100%;text-align:right;">
        <div style="float:right">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="form.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="form.pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="form.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {liveSystemAPI} from "@/api/index";
  export default {
    components: {
    },
    data() {
      return {
        loginUser: {
          uid: this.$root.uid,
          username: this.$root.username,
          email: this.$root.email
        },
        loadingTableData: false,
        form: {
          userName: "",
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },
        tableData: [], //列表
        loading: false,
      };
    },
    created: function () {
      //获取用户列表
      this.btnPageList();
    },
    methods: {
      //每页显示条数更改
      handleSizeChange(pageSize) {
        this.form.pageSize = pageSize;
        this.btnPageList();
      },
      //跳转、下一页等
      handleCurrentChange(pageIndex) {
        this.form.pageIndex = pageIndex;
        this.btnPageList();
      },
      //重置
      btnReset() {
        this.form.pageIndex = 1
        this.form.userName = ''
        this.form.key = ''
        this.btnPageList();
      },
      //查询
      btnPageList(isClickFlag) {
        this.loadingTableData = true;
        //判断是否点击查询按钮
        if (isClickFlag) {
          this.form.pageIndex = 1;
        } else {
        }
        //请求后台
        liveSystemAPI.getRedisCachePage(
          this.form,
          res => {
            if (res) {
              this.loadingTableData = false;
              //赋值
              this.tableData = res.records
              this.form.total = res.total;
              this.form.pageIndex = res.page.pageIndex;
              this.form.pageSize = res.page.pageSize;
            }
          },
        );
      },
      deleteCache(row){
        this.$confirm('确定删除当前缓存？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let form = {
            key: row.key,
          }
          liveSystemAPI.deleteCache(form, res =>{
            if(res == 1){
              this.$message.success("删除成功")
              this.btnPageList();
            }
          });
        })
      },
      dateFormat: function(row, column) {
        let date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return formatDate(date);
      },
      clear(){
        this.$confirm('确定清空所有缓存？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then(() => {
          let form = {
          }
          liveSystemAPI.clearRedis(form, res =>{
            if(res == 1){
              this.$message.success("清空完成")
              this.btnPageList();
            }
          });
        })
      }
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mL57 {
    margin-left: 57px !important;
  }

  .el-tag {
    background-color: rgba(255, 255, 255, 0.2);
    border: 0px;
  }

  .div_total {
    line-height: 32px;
    display: inline;
    font-size: 16px;
    color: #606266;
    margin: 5px 100px 0px 0px;
  }
  .top {
  margin-top:20px;
  /* margin-left:20px; */
  padding:20px;
  border: none;
  border-radius: 0px;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
}
.border_bottom {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(231, 228, 235);
}
.title_span{
  font-size:14px;
  color:#666
}
</style>
